<template>
  <div class="home-page">
    <el-row :gutter="20">
      <!-- 左侧充电站容器 -->
      <el-col :span="18">
        <div class="station-container">
          <h2>充电站列表</h2>

          <!-- 搜索和过滤栏 -->
          <el-row :gutter="20" class="filter-row">
            <el-col :span="6">
              <el-input v-model="searchQuery" placeholder="搜索站点名称" clearable @clear="fetchStations" @input="debouncedFetchStations" />
            </el-col>
            <el-col :span="6">
              <el-select v-model="filterType" placeholder="选择站点类型" @change="fetchStations">
                <el-option label="全部类型" value=""></el-option>
                <el-option v-for="type in stationTypes" :key="type" :label="type" :value="type" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="filterProperty" placeholder="选择站点属性" @change="fetchStations">
                <el-option label="全部属性" value=""></el-option>
                <el-option v-for="property in stationProperties" :key="property" :label="property" :value="property" />
              </el-select>
            </el-col>
            <el-col :span="6" class="text-right">
              <el-button type="primary" @click="refreshStations">刷新</el-button>
            </el-col>
          </el-row>

          <!-- 站点列表 -->
          <el-row :gutter="20" class="station-row">
            <el-col :span="8" v-for="station in stations" :key="station.id">
              <el-card
                  class="box-card"
                  shadow="hover"
                  @click="goToPiles(station.id)"
              >
                <img :src="station.stationImgUrl" alt="站点图片" class="station-image" />
                <div class="station-info">
                  <div class="station-name">📍 {{ station.stationName }}</div>
                  <div class="station-address">🏠 {{ station.address }}</div>
                  <div class="station-details">
                    <span>⚡ {{ station.chargingPileCount }}桩</span>
                    <span v-if="station.status === '正常'" class="status-normal">✅ 正常</span>
                    <span v-else class="status-issue">⚠️ {{ station.status }}</span>
                  </div>
                  <div class="station-type-property">
                    <span>类型: {{ station.stationType }}</span>
                    <span>属性: {{ station.stationProperty }}</span>
                  </div>
                  <div class="station-hours">
                    🕒 {{ station.openTime }} - {{ station.closeTime }}
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 分页组件 -->
          <el-pagination
              v-if="total > pageSize"
              @current-change="handlePageChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="total">
          </el-pagination>

          <el-empty v-if="stations.length === 0" description="暂无数据" />
        </div>
      </el-col>

      <!-- 右侧示例按钮容器 -->
      <el-col :span="6">
        <div class="example-container">
          <h3>功能快捷导航</h3>
          <el-card class="example-card" @click="goToPage('dashboard')">
            📊 数据概览
          </el-card>
          <el-card class="example-card" @click="goToPage('profile')">
            👤 用户信息
          </el-card>
          <el-card class="example-card" @click="goToPage('settings')">
            ⚙️ 系统设置
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import debounce from 'lodash/debounce'

export default {
  name: 'StationList',
  setup() {
    const router = useRouter()
    const stations = ref([])
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const searchQuery = ref('')
    const filterType = ref('')
    const filterProperty = ref('')

    const stationTypes = ref(["混合自用", "特斯拉专用", "商用专用", "工业专用"])
    const stationProperties = ref(["共享站点", "个人站点", "公司站点"])

    // 创建自定义 axios 实例
    const apiClient8080 = axios.create({
      baseURL: 'http://localhost:8080', // 指定 8080 端口
      timeout: 5000, // 设置超时时间
    });

    const fetchStations = async () => {
      try {
        const params = {
          page: currentPage.value - 1,
          size: pageSize.value,
          name: searchQuery.value || undefined,
          type: filterType.value || undefined,
          property: filterProperty.value || undefined
        }
        const { data } = await apiClient8080.get('/station/getStationByPage', { params });
        console.log('获取站点列表成功', data);
        stations.value = data.records || []; // 确保数据格式正确
        total.value = data.total || 0
      } catch (error) {
        console.error('获取站点列表失败', error);
      }
    };

    // 防抖搜索
    const debouncedFetchStations = debounce(fetchStations, 500)

    const goToPiles = (stationId) => {
      router.push({ name: 'PileList', params: { stationId } })
    }

    const goToPage = (pageName) => {
      router.push({ name: pageName })
    }

    const handlePageChange = (page) => {
      currentPage.value = page
      fetchStations()
    }

    const refreshStations = () => {
      currentPage.value = 1
      fetchStations()
    }

    onMounted(() => {
      fetchStations()
    })

    // 监听搜索和过滤条件变化
    watch([searchQuery, filterType, filterProperty], () => {
      currentPage.value = 1
      debouncedFetchStations()
    })

    return {
      stations,
      total,
      currentPage,
      pageSize,
      searchQuery,
      filterType,
      filterProperty,
      stationTypes,
      stationProperties,
      goToPiles,
      goToPage,
      handlePageChange,
      refreshStations,
      debouncedFetchStations
    }
  }
}
</script>
<style scoped>
/* 页面布局样式 */
.home-page {
  padding: 20px;
}

/* 过滤栏样式 */
.filter-row {
  margin-bottom: 20px;
}

/* 卡片样式 */
.box-card {
  margin: 10px 0;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}
.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 站点图片样式 */
.station-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* 站点信息样式 */
.station-info {
  padding: 15px;
}
.station-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.station-address {
  color: #666;
  margin-bottom: 10px;
}
.station-details, .station-type-property, .station-hours {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.status-normal {
  color: green;
}
.status-issue {
  color: red;
}

/* 示例按钮容器样式 */
.example-container {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}
.example-container h3 {
  margin-bottom: 20px;
}
.example-card {
  margin: 10px 0;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border-radius: 8px;
  background: #fff;
}
.example-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 全局布局优化 */
.station-row {
  padding: 20px 0;
}

/* 分页组件样式 */
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
</style>
